<template>
    <div id="content-detail">
        <div class="detail-page" v-for="(deail, index) in detaillist" :key="index">
            <div class="detail-title"><span>推广</span>{{deail.title}}</div>
            <div class="detail-header">
                <div>
                  <img :src="deail.picUrl"/>
                  </div>
                <div><p>{{deail.title}}</p><p>{{deail.createTime}} 阅读量：{{deail.readCnt}} 分享量：{{deail.shareCnt}}</p></div>
            </div>
            <div class="content-text" v-html="deail.content"></div>
            <div class="detail-middle">
              <img src="../../static/img/detail_img.png" />
            </div>
        <card>
            <div slot="content" class="card-demo-flex card-demo-content01 detail-img">
                <div class="vux-1px-l vux-1px-r">
                   <qrcode :fg-color="'#000'" v-show="!qrcodeShow" v-model="codeurl" type="img" class="img_qr"></qrcode>
                    <qrcode-addtag v-show="qrcodeShow" :logo="logo" :codeurl="codeurl"></qrcode-addtag>
                    <!-- <qrcode-addtag :codeurl="codeurl"></qrcode-addtag> -->
                    <br/>
                    扫描微信二维码
                </div>
                <div class="vux-1px-r">
                    <div>
                        <img class="fingerprint" src="../../static/img/zhiwenshibie@2x.png" />
                    </div>
                    <br/>
                    长按指纹识别图中二维码
                </div>
            </div>
        </card>
        </div>
        <div class="tabbar-icon" v-if="shareshowdetail">
            <tabbar @on-index-change="onIndexChange">
            <tabbar-item class="icon-first" @click.native.prevent="collectevent">
                <img slot="icon" v-if="!collectjudge" src="../../static/img/shoucang-weidianji@2x.png">
                <img slot="icon" v-if="collectjudge" src="../../static/img/shoucang-dianji@2x.png">
                <span slot="label" :class="{collect:collectjudge}">收藏</span>
            </tabbar-item>
            <tabbar-item @click.native.prevent="share">
                <img slot="icon" src="../../static/img/zhuanfa@2x.png">
                <span slot="label">分享</span>
            </tabbar-item>
            </tabbar>
        </div>
    </div>
</template>
<script>
var timeStamp = String(parseInt(Number(new Date()) / 1000))
import ShareFloat from '../comment/ShareFloat'
import QrcodeAddtag from '../comment/QrcodeAddtag'
import { Card, Tabbar, TabbarItem, Group, Cell, Qrcode } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  data () {
    return {
      item: {},
      detaillist: [],
      shareshow: false,
      collectjudge: false,
      shareshowdetail: false,
      qrcodeShow: true,
      contentwx: '',
      tokenval: '',
      userId: '',
      postId: '',
      partnerId: '',
      codeurl: '',
      logo: ''
    }
  },
  components: {
    Card,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    Qrcode,
    ShareFloat,
    QrcodeAddtag
  },
  created () {
    window.document.title = '内容详情'
    this.loadContent()
    var params = {
      userId: this.$store.state.userID || '',
      partnerId: utils.getQueryString('partnerId') || utils.getQueryString('pt'),
    }
    api.creditloanDetail(params).then(res => {
      console.log(res,12)
      if (res.status === '200') {
        this.item = res.data
      }
    })
    
  },
  methods: {
    loadContent () {
      this.tokenval = utils.AnonToken(timeStamp)
      this.userId = utils.getQueryString('userId') || utils.getQueryString('u')
      this.postId = utils.getQueryString('postId') || utils.getQueryString('a')
      this.partnerId = utils.getQueryString('partnerId') || utils.getQueryString('pt')

      var params = {
        id: this.postId,
        Tokenuser: this.tokenval,
        userid: this.userId,
        timestamp: timeStamp
      }
      api.articledetail(params).then(res => {
        console.log(res)
        if (res.status === '200') {
          this.contentwx = res.data
          this.collectjudge = res.data.collectFlag
          this.detaillist = this.detaillist.concat(res.data)
          if (this.partnerId !== '' && this.partnerId !== null && this.partnerId !== undefined && this.partnerId !== 'undefined') {
            this.codeurl = process.env.BASE_URL + '/creditLogin/index?shareParam=share&userId=' + this.userId + '&postId=' + res.data.id + '&partnerId=' + this.partnerId + '&channel=6'
          } else {
            this.codeurl = process.env.BASE_URL + '/creditLogin/index?shareParam=share&userId=' + this.userId + '&postId=' + res.data.id + '&channel=6'
          }
          if (this.contentwx.qrCodeLogoIsShow) {
            this.qrcodeShow = true
            // this.logo = this.contentwx.logoUrl
            this.logo = this.$store.state.logoUrl + this.partnerId + '.png'
          } else {
            this.qrcodeShow = false
          }
          this.WXsharecontent()
          utils.jssdkwx(api, this.$wechat, this.$store)
        } else if (res.status === '400005016' || res.status === '400006003') {
          this.$router.push('/creditGuest/index')
        }
      })
    },
    WXsharecontent () {
      var sharetitle = this.contentwx.title
      var shareimg = this.contentwx.picUrl
      var sharedesc = this.contentwx.summary
      var shareParams
      if (this.partnerId !== '' && this.partnerId !== null && this.partnerId !== undefined) {
        shareParams = '?shareParam=share&userId=' + this.userId + '&postId=' + this.contentwx.id + '&partnerId=' + this.partnerId
      } else {
        shareParams = '?shareParam=share&userId=' + this.userId + '&postId=' + this.contentwx.id
      }
      var shareUrl = this.$store.state.Url + '/article/detail_out'
      this.$store.commit('changeIndexConf', {
        shareTitle: sharetitle,
        shareDesc: sharedesc,
        shareImg: shareimg,
        shareLink: shareUrl + shareParams
      })
    }
  }
}
</script>
